
<template>
  <div>
    <Modal v-model="mol" title="人脸识别" @on-visible-change="modalChange" width="700">
      <face-camera :isPlay="shows" @img-result="imgResult"></face-camera>
      <div slot="footer">
        <Button type="error" size="large" long :loading="modal_loading" @click="del">关闭</Button>
      </div>
    </Modal>
    <Button type="primary" @click="TakePhoto">点击进行拍照并上传操作</Button>
    <Divider>呦呦切克闹</Divider>
    <Card style="width:500px" v-show="cardShow">
      <p slot="title">
        <Icon type="ios-film-outline"></Icon>
        服务器返回的信息
      </p>
     {{serverResult}}
    </Card>
  </div>
</template>

<script>
import FaceCamera from '_c/face-camera'
export default {
  data () {
    return {
      mol: false,
      shows: false,
      cardShow: false,
      modal_loading: false,
      serverResult: ''
    }
  },
  components: {
    FaceCamera
  },
  methods: {
    TakePhoto () {
      this.mol = true
    },
    modalChange (e) {
      this.shows = e
    },
    del () {
      this.mol = false
    },
    imgResult (data) {
      this.mol = false
      this.cardShow = true
      this.serverResult = data
    }
  },
  mounted () {}
}
</script>

<style>

</style>
